<template>
    <div>
      <!-- 面包屑 -->
      <div class="breadNav" style="margin: 20px 0 20px 20px;">
          <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-home">首页</el-breadcrumb-item>
          <el-breadcrumb-item class="el-icon-folder-opened" :to="{ path: '/stateAdmin' }"><a href="/">积分商城</a></el-breadcrumb-item>
          <el-breadcrumb-item class="el-icon-folder-opened">状态管理</el-breadcrumb-item>
          <el-breadcrumb-item class="el-icon-folder-opened">商品详情</el-breadcrumb-item>
          </el-breadcrumb>  
        </div>
      <!-- 步骤条 -->
      <div class="x_step">
        <el-steps :active="4" align-center>
          <el-step title="买家下单" description="2022-10-10"></el-step>
          <el-step title="买家付款" description="2022-10-10"></el-step>
          <el-step title="商家发货" description="2022-10-10"></el-step>
          <el-step title="订单完成" description="2022-10-10"></el-step>
        </el-steps>
      </div>
      <!-- 订单卡片 -->
      <div class="x_card">
          <el-card class="box-card">
              <div class="text item">
                <div v-for="item in dataList" :key="item.id">
                  <p>订单编号:&nbsp;&nbsp;{{item.listcode}}</p>
                  <p>付款方式:&nbsp;&nbsp;{{item.pay}}</p>
                  <p>买家:&nbsp;&nbsp;{{item.payler}}</p>
                  <p>配送方式:&nbsp;&nbsp;{{item.postway}}</p>
                  <p>收货地址:&nbsp;&nbsp;{{item.location}}</p>
                </div>
                <el-row>
                  <el-button type="primary" @click="editGoods(index)">修改订单收货信息</el-button>
              </el-row>
              </div>
             
          </el-card>
          <el-card class="box-card">
              <div  class="text item">
                <p class="x_gState">订单状态: 
                  <span style="font-size:18px;font-weight:bold" @click="delivery">已关闭</span>
                  (关闭时间:{{time}})
                </p>
              </div>
          </el-card>
      </div>
      <!-- 商品信息 --> 
      <div class="x_goodsInfo">
        <div>
          <table border="1" class="x_shopForm" 
          style="border-collapse:collapse; margin-top:45px;">
          <caption style="font-size:16px;">商品信息</caption>
            <tr>
              <th>商品标题</th>
              <th>规格、编号、条码</th>
              <th>单价</th>
              <th>数量</th>
              <th>原价</th>
              <th>状态</th>
            </tr>
            <tr>
              <td>
                <img src="" alt="">
                <span>三公仔小儿七星茶颗粒</span>
              </td>
              <td>
                <p>规格：无</p>
                <p>编码：无</p>
                <p>条码：无</p>
              </td>
              <td>30积分</td>
              <td>1个</td>
              <td>30积分</td>
              <td>已付款</td>
            </tr>
            <tr>
                <td colspan="6">
                  <div class="x_money">
                    <p><span>商品小计：</span><span>30积分</span></p>
                    <p><span>优惠：</span><span>￥0.00</span></p>
                    <p><span>实付款：</span><span>30积分</span></p>
                  </div>
                </td>
            </tr>
          </table>
  
        </div>
      </div>
      
      <!-- 模态框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="收货地址" prop="pass">
            <el-input  v-model="ruleForm.location" ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="checkPass">
            <el-input  v-model="ruleForm.payler" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {getStatusDetailApi,editStatusList} from '../../../api'
  export default {
    data() {
      return {
          dataList:[],
          ruleForm: {
            location:"",
            payler:"",
          },
          dialogVisible: false,
          time:''
      }
    },
    created() {
      getStatusDetailApi().then(res => {
        this.dataList = res.data
      })
      this.current()
    },
    methods: {
      //模态框
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        delivery(){},
        editGoods(e) {
          this.ruleForm = this.dataList[e]
          console.log(e);
          this.dialogVisible = true
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              // alert('submit!');
              console.log(this.ruleForm);
              editStatusList(this.ruleForm).then(res => {
                console.log(res)
                this.dialogVisible = false
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
          this.dialogVisible = false
        },
        current() {
            var d = new Date(),
                str = ''
            str += d.getFullYear() + '年' //获取当前年份
            str += d.getMonth() + 1 + '月' //获取当前月份（0——11）
            str += d.getDate() + '日'
            str += d.getHours() + '时'
            str += d.getMinutes() + '分'
            str += d.getSeconds() + '秒'
            this.time = str
            return str
        },
      },
  }
  </script>
  
  <style lang="scss" scoped>
  .x_step {
    width: 1000px;
    margin: 50px auto;
  }
  .x_goodsTable {
    margin: 20px auto;
    width: 1000px;
  }
  .x_card {
      display:flex;
      width:800px;
      margin: auto;
      .text {font-size: 14px;}
    .item {padding: 18px 0;}
  
    .box-card {width: 480px;}
  }
  .x_goodsInfo {
      width:1000px;
      margin:auto;
      .x_shopForm{
          width: 80%;
          margin: auto;
          // border: 1px solid gray;
          text-align: center;
          tr{border:none}
        }
      .x_money{
        float:right;
        margin-right: 40px;
      }
  }
  
  .box-card {
    display:flex;
    span{
      font-size:14px;
      display:inline-block;
  
    }
  }
  </style>